import React from 'react';
import {
  Modal,
  Form,
  Input,
  DatePicker,
  TimePicker,
  Row,
  Col,
  Divider,
  Select,
  Button
} from 'antd';
import { UserOutlined, PhoneOutlined, ProjectOutlined } from '@ant-design/icons';
import dayjs, { Dayjs } from 'dayjs';
import { type GPU, type ReservationFormData } from '../types';

const { Option } = Select;
const { TextArea } = Input;

interface ReservationModalProps {
  visible: boolean;
  selectedGpu: GPU | null;
  onSubmit: (values: ReservationFormData) => void;
  onCancel: () => void;
}

const ReservationModal: React.FC<ReservationModalProps> = ({
  visible,
  selectedGpu,
  onSubmit,
  onCancel
}) => {
  const [form] = Form.useForm();

  const handleFormSubmit = (values: ReservationFormData) => {
    onSubmit(values);
  };

  const disabledDate = (current: Dayjs) => {
    return current && current < dayjs().startOf('day');
  };

  return (
    <Modal
      title={`预定GPU: ${selectedGpu?.name || ''} (${selectedGpu?.model})`}
      open={visible}
      onCancel={onCancel}
      footer={null}
      width={700}
      destroyOnClose
      styles={{
        body: {
          paddingTop: 0
        }
      }}
    >
      <Divider />
      
      <Form
        form={form}
        layout="vertical"
        onFinish={handleFormSubmit}
        initialValues={{
          timeRange: [dayjs('09:00', 'HH:mm'), dayjs('18:00', 'HH:mm')],
          project: 'default'
        }}
      >
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="申请人"
              name="applicant"
              rules={[{ required: true, message: '请输入申请人姓名' }]}
            >
              <Input 
                prefix={<UserOutlined />} 
                placeholder="请输入姓名" 
                size="large"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="联系方式"
              name="contact"
              rules={[{ required: true, message: '请输入联系方式' }]}
            >
              <Input 
                prefix={<PhoneOutlined />} 
                placeholder="手机号或邮箱" 
                size="large"
              />
            </Form.Item>
          </Col>
        </Row>
        
        <Form.Item
          label="项目名称"
          name="project"
          rules={[{ required: true, message: '请选择或输入项目名称' }]}
        >
          <Select
            placeholder="选择或输入项目名称"
            size="large"
            allowClear
            options={[
              { value: 'default', label: '默认项目' },
              { value: 'ai-training', label: 'AI模型训练' },
              { value: 'data-analysis', label: '大数据分析' },
              { value: 'rendering', label: '3D渲染' },
              { value: 'research', label: '科学研究' },
            ]}
          />
        </Form.Item>
        
        <Form.Item
          label="使用目的"
          name="purpose"
          rules={[{ required: true, message: '请输入使用目的' }]}
        >
          <TextArea 
            rows={3} 
            placeholder="请详细描述GPU的使用目的和任务内容" 
            showCount 
            maxLength={500}
          />
        </Form.Item>
        
        <Divider>时间选择</Divider>
        
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="开始日期"
              name={['dateRange', 0]}
              rules={[{ required: true, message: '请选择开始日期' }]}
            >
              <DatePicker 
                style={{ width: '100%' }} 
                disabledDate={disabledDate}
                size="large"
                format="YYYY-MM-DD"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="开始时间"
              name={['timeRange', 0]}
              rules={[{ required: true, message: '请选择开始时间' }]}
            >
              <TimePicker 
                format="HH:mm" 
                minuteStep={15} 
                style={{ width: '100%' }} 
                size="large"
                showNow={false}
              />
            </Form.Item>
          </Col>
        </Row>
        
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="结束日期"
              name={['dateRange', 1]}
              rules={[{ required: true, message: '请选择结束日期' }]}
            >
              <DatePicker 
                style={{ width: '100%' }} 
                disabledDate={disabledDate}
                size="large"
                format="YYYY-MM-DD"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="结束时间"
              name={['timeRange', 1]}
              rules={[{ required: true, message: '请选择结束时间' }]}
            >
              <TimePicker 
                format="HH:mm" 
                minuteStep={15} 
                style={{ width: '100%' }} 
                size="large"
                showNow={false}
              />
            </Form.Item>
          </Col>
        </Row>
        
        <Form.Item style={{ marginTop: 32, marginBottom: 0 }}>
          <Button type="primary" htmlType="submit" size="large" block>
            提交预定申请
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ReservationModal;